<!-- 热门产品 -->
<template>
  <div class="hotPro" v-if="list && list.length > 0">
    <div class="wCen animate__fadeInUp">
      <div class="homeTitle">
        <span class="homeTitle_l">{{ $t("product-t1") }} </span>
        <span class="homeTitle_r" v-if="localeCn">HOT PRODUCTS</span>
      </div>
      <div class="homeMore" @click="go2Product">
        <span class="homeMore_r"></span>
      </div>
      <div class="list">
        <section class="swiper-container swiper-product">
          <article class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, index) in listArr" :key="index">
              <div class="block hand" v-for="(itemJ, idxJ) in item" :key="idxJ" @click="go2ProductDetail(itemJ)">
                <div class="imgBox">
                  <img :src="splitFirst(itemJ.photoUrls)" alt="" class="img" v-if="itemJ.photoUrls" />
                  <img :src="defaultLogo" alt="" class="img" v-else />
                </div>
                <div class="bottom">
                  <p class="txt text_e-1">{{ localeCn?itemJ.productName:itemJ.productNameEn||itemJ.productName }}</p>
                  <p class="more">MORE</p>
                </div>
                <img src="@/assets/images/icon_hot.png" alt="" class="hot" />
              </div>
            </div>
          </article>
          <div class="swiper-pagination"></div>
        </section>
        <!-- 按钮 -->
        <!-- <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { getList } from "@/api/product";
import util from "@/libs/util";
export default {
  data() {
    return {
      list: [],
      form: {
        pageNum: 1,
        pageSize: 104,
        isHome: 1,
        orderByColumn: "t1.homeSortOrder",
        isHomeEn: undefined,
        orderByColumnEn: undefined,
        isAsc: "asc",
      },
      mySwiper: null,
    };
  },
  computed: {
    slidesPerView() {
      if (this.isMobile) {
        return 2;
      } else {
        return 4;
      }
    },
    slidesPerColumn() {
      if (this.isMobile) {
        return 3;
      } else {
        return 2;
      }
    },
    listArr() {
      const num_per = this.slidesPerView * this.slidesPerColumn;
      return util.sliceIntoChunks(this.list, num_per);
    },
  },
  mounted() {
    if (this.localeCn) {
      this.form.orderByColumn = "t1.homeSortOrder";
      this.form.isHome = 1;
      this.form.isHomeEn = undefined;
      this.form.orderByColumnEn = undefined;
    } else {
      this.form.orderByColumnEn = "t1.homeSortOrderEn";
      this.form.isHomeEn = 1;
      this.form.isHome = undefined;
      this.form.orderByColumn = undefined;
    }

    this.getListFun();
  },
  methods: {
    initSwiper() {
      this.$nextTick(() => {
        if (this.mySwiper && this.mySwiper.destroy) {
          this.mySwiper.destroy(true, true);
        }
        this.mySwiper = new Swiper(".swiper-product", {
          spaceBetween: 2,
          //   nextButton: ".swiper-button-next",
          //     prevButton: ".swiper-button-prev",
          pagination: ".swiper-product .swiper-pagination",
          autoplay: 5000,
          paginationClickable: true,
          autoplayDisableOnInteraction: false, //手动播放后继续自动播放
        });
      });
    },
    getListFun() {
      this.invoke(getList, this.form).then((res) => {
        if (res && res.code == 200) {
          this.list = res.rows;
          this.initSwiper();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.hotPro {
  padding: 130px 0 120px;
  background-color: #fff;
  .wCen {
    overflow: hidden;
  }

  .homeMore {
    margin: 46px 0 80px;
  }

  .list {
    position: relative;
    .swiper-wrapper {
    }

    .swiper-slide {
      $w: 361px;
      $h: 270px;
      $hb: 64px;
      $g: 36px;
      $column: 4;
      display: flex;
      flex-wrap: wrap;
      .block {
        overflow: hidden;
        border:1px solid #f1f1f1;
        height: $h;
        width: $w;
        flex: 0 0 $w;
        margin-bottom: $g;
        position: relative;

        &:not(:nth-child(#{$column}n)) {
          margin-right: $g;
        }
        &:hover .img {
          transform: scale(1.1);
        }
        .hot {
          position: absolute;
          top: 0;
          left: 0;
        }
      }

      .imgBox {
        display: flex;
        justify-content: center;
        align-items: center;
        height: calc(#{$h} - #{$hb});
        overflow: hidden;
        box-sizing: border-box;

        .img {
          max-width: 100%;
          max-height: 100%;
          transition: transform 0.2s linear;
        }
      }

      .bottom {
        height: $hb;
        font-size: 20px;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        .more {
          color: #e45291;
          margin-left: 20px;
        }
      }
    }

    .swiper-container {
      padding-bottom: 20px;
      margin: 0 auto;
      :deep(.swiper-pagination) {
        bottom: 0px;
        &-bullet {
          &-active {
            background-color: #e45291;
          }
        }
      }
    }
  }
  @media (min-width: 1441px) and (max-width: 1700px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1600});
    }
    padding: scale(100px) 0;
    .homeMore {
      margin: scale(46px) 0 scale(80px);
    }
    .list {
      padding-left: 40px;
      .swiper-slide {
        $w: scale(340px);
        $h: scale(255px);
        $hb: scale(64px);
        $g: scale(25px);
        $column: 4;
        .block {
          height: $h;
          width: $w;
          flex: 0 0 $w;
          margin-bottom: $g;
          &:not(:nth-child(#{$column}n)) {
            margin-right: $g;
          }
          .hot {
            width: scale(80px);
          }
        }
        .imgBox {
          height: calc(#{$h} - #{$hb});
        }
        .bottom {
          height: $hb;
          font-size: scale(20px);
          .more {
            margin-left: scale(20px);
          }
        }
      }
      .swiper-container {
        padding-bottom: scale(20px);
      }
    }
  }
  @media screen and (min-width: 1281px) and (max-width: 1440px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1440});
    }
     padding: scale(100px) 0;
    .homeMore {
      margin: scale(46px) 0 scale(80px);
    }
    .list {
      .swiper-slide {
        $w: scale(361px);
        $h: scale(270px);
        $hb: scale(64px);
        $g: scale(40px);
        $column: 4;
        .block {
          height: $h;
          width: $w;
          flex: 0 0 $w;
          margin-bottom: $g;
          &:not(:nth-child(#{$column}n)) {
            margin-right: $g;
          }
          .hot {
          width: scale(80px);
          }
        }
        .imgBox {
          height: calc(#{$h} - #{$hb});
        }
        .bottom {
          height: $hb;
          font-size: scale(20px);
          .more {
            margin-left: scale(20px);
          }
        }
      }
      .swiper-container {
        padding-bottom: scale(20px);
      }
    }
  }
  @media screen and (min-width: 1000px) and (max-width: 1280px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1280});
    }
     padding: scale(100px) 0;
    .homeMore {
      margin: scale(46px) 0 scale(80px);
    }
    .list {
      padding-left: 10px;
      .swiper-slide {
        $sc: 1.1;
        $w: scale(361px * $sc);
        $h: scale(270px * $sc);
        $hb: scale(64px * $sc);
        $g: scale(40px * $sc);
        $column: 4;
        .block {
          height: $h;
          width: $w;
          flex: 0 0 $w;
          margin-bottom: $g;
          &:not(:nth-child(#{$column}n)) {
            margin-right: $g;
          }
          .hot {
            width: scale(80px);
          }
        }
        .imgBox {
          height: calc(#{$h} - #{$hb});
        }
        .bottom {
          height: $hb;
          font-size: scale(20px);
          .more {
            margin-left: scale(20px);
          }
        }
      }
      .swiper-container {
        padding-bottom: scale(20px);
      }
    }
  }
  @media screen and (min-width: 768px) and (max-width: 999px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_999});
    }
     padding: scale(100px) 0;
    .homeMore {
      margin: scale(46px) 0 scale(80px);
    }
    .list {
      .swiper-slide {
        $w: scale(340px);
        $h: scale(255px);
        $hb: scale(64px);
        $g: scale(30px);
        $column: 4;
        .block {
          height: $h;
          width: $w;
          flex: 0 0 $w;
          margin-bottom: $g;
          &:not(:nth-child(#{$column}n)) {
            margin-right: $g;
          }
          .hot {
           width: scale(80px);
          }
        }
        .imgBox {
          height: calc(#{$h} - #{$hb});
        }
        .bottom {
          height: $hb;
          font-size: scale(20px);
          .more {
            margin-left: scale(20px);
          }
        }
      }
      .swiper-container {
        padding-bottom: scale(20px);
      }
    }
  }
  @media (max-width: 767px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_750});
    }
    padding: 40px 0;
    .homeMore {
      margin: scale(46px) 0 scale(80px);
    }
    .list {
      margin: 0 auto;
      width: 92%;
      .swiper-slide{
        justify-content: center;
      }
      .swiper-slide {
        $w: scale(361px);
        $h: scale(270px);
        $hb: scale(64px);
        $g: scale(40px);
        $column: 4;
        .block {
          height: $h;
          width: $w;
          flex: 0 0 $w;
          margin-bottom: $g;
          &:not(:nth-child(#{$column}n)) {
            margin-right: $g;
          }
          margin-right: $g;
          &:not(:nth-child(2n+1)) {
            margin-right: 0;
          }
          .hot {
           width: scale(80px);
          }
        }
        .imgBox {
          height: calc(#{$h} - #{$hb});
        }
        .bottom {
          height: $hb;
          font-size: scale(20px);
          .more {
            margin-left: scale(20px);
          }
        }
      }
      .swiper-container {
        padding-bottom: scale(20px);
      }
    }
  }
}
</style>
